/**
 * @class AbstractCallbackDialog
 * @extends Ext.BasicDialog
 */

var AbstractCallbackDialog = function(config) {
  var el = Ext.get(document.body).createChild({ cls : 'af-dlg' });
  AbstractCallbackDialog.superclass.constructor.call(this, el, config);
}

Ext.extend(AbstractCallbackDialog, Ext.BasicDialog, {
  setCallback : function(callback, scope) {
    this.callback = callback;
    this.scope = scope;
  } 
});


/**
 * @class PrivateLibraryDialog
 * @extends AbstractCallbackDialog
 */
var PrivateLibraryDialog = function() {

  PrivateLibraryDialog.superclass.constructor.call(this, { 
    title : 'Input Private Library Script Location',
    modal : true,
    width : 530,
    height : 120,
    resizable : false,
    shadow : true
  });
  this.addKeyListener(27, this.hide, this);
  this.openBtn = this.addButton('Open', this.handleOpen, this);
  this.closeBtn = this.addButton('Close', this.hide, this);
  this.setup();
}

Ext.extend(PrivateLibraryDialog, AbstractCallbackDialog, {

  setup : function() {
    this.formEl = this.body.createChild({ cls : 'af-dlg-form' });
    this.form = new Ext.form.Form({ labelWidth : 150 });
    this.scriptUrlField = new Ext.form.TextField({
      fieldLabel : 'Library JavaScript URL',
      /*regex : /^https?:\/\/[\w-.]+\/\S*$/,
      regexText : 'Please input valid URL',*/
      width : 330
    });
    this.form.add(this.scriptUrlField);
    this.form.render(this.formEl);
    this.scriptUrlField.on('change', this.handleUpdate, this);
  }
  ,
  show : function() {
    this.scriptUrlField.setValue('');
    PrivateLibraryDialog.superclass.show.call(this);
  }
  ,
  handleUpdate : function() {
    if (this.scriptUrlField.getValue() && this.scriptUrlField.validate()) {
      this.openBtn.enable();
    } else {
      this.openBtn.disable();
    }
  }
  ,
  handleOpen : function() {
    var scriptUrl = this.scriptUrlField.getValue();
    this.callback.call(this.scope, scriptUrl);
    this.hide();
  }
});


/**
 * @class ParamInputDialog
 * @extends AbstractCallbackDialog
 */
var ParamInputDialog = function(config) {
  ParamInputDialog.superclass.constructor.call(this, { 
    title : 'Input Parameter Definition',
    modal : true,
    width : 360,
    height : 200,
    shadow : true,
    proxyDrag : true,
    resizable :false 
  });
  this.formEl = this.body.createChild({ cls : 'af-dlg-form' });
  this.form = new Ext.form.Form({ labelWidth : 100 });
  this.form.add(
    new Ext.form.TextField({
      fieldLabel : 'Parameter Name',
      name : 'name',
      width : 200 
    }),
    new SelectBox({
      fieldLabel : 'Data Type',
      name : 'type',
      options : ['string','integer','float','boolean','object'], 
      width : 200 
    }),
    new Ext.form.Checkbox({
      fieldLabel : 'Is Array?',
      name : 'isArray'
    }),
    new Ext.form.TextField({
      fieldLabel : 'Default Value',
      name : 'default',
      width : 200 
    })
  );
  this.form.render(this.formEl);
  this.addKeyListener(27, this.hide, this);
  this.addButton('Save', this.handleSave, this);
  this.addButton('Close', this.hide, this);

}

Ext.extend(ParamInputDialog, AbstractCallbackDialog, {
  show : function() {
    this.form.reset();
    ParamInputDialog.superclass.show.call(this);
  }
  ,
  handleSave : function() {
    this.callback.call(this.scope, this.form.getValues());
  }
});


/**
 * @class ScriptPublishDialog
 * @extends AbstractCallbackDialog
 */
var ScriptPublishDialog = function(title, label) {
  ScriptPublishDialog.superclass.constructor.call(this, { 
    title : title || '',
    modal : true,
    width : 530,
    height : 400,
    resizable : false,
    shadow : true
  });
  this.addKeyListener(27, this.hide, this);
  this.setup(label);
}

Ext.extend(ScriptPublishDialog, AbstractCallbackDialog, {
  setup : function(label) {
    this.descriptionEl = this.body.createChild({ cls : 'af-dlg-desc'  });
    this.descriptionEl.update(label);
    this.formEl = this.body.createChild({ cls : 'af-dlg-form' });

    this.scriptArea = new Ext.form.TextArea({
      width : 500,
      height : 300,
      grow : false,
      selectOnFocus : true
    });
    this.scriptArea.render(this.formEl);

  }
  ,
  setScriptText : function(text) {
    this.scriptArea.setValue(text)
  }
});
